<template>
  <div>
    <el-form ref="xForm" v-model="formData" :config="formConfig">
      <el-collapse  v-model="activeNames" >
        <el-collapse-item name="1">
          <template #title>
            <el-icon class="header-icon">
            <info-filled />
          </el-icon>
            常规信息
          </template>
        <el-form-item label="节点ID" :rules="[{ required: true, message: 'Id 不能为空' }]">
          <el-input type="text" v-model="formData['id']" ></el-input>
        </el-form-item>
          <el-form-item label="节点名称" :rules="[{ required: true, message: ' 节点名称不能为空' }]">
            <el-input type="text" v-model="formData['name']" ></el-input>
          </el-form-item>
          <el-form-item label="节点描述" >
            <el-input type="textarea" v-model="formData['documentation']" ></el-input>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item name="2">
          <template #title>
            <el-icon class="header-icon">
              <List />
            </el-icon>
             表单配置
          </template>
          <el-form-item label="流程表单" >
            <FmSelectTable v-model:value="formData['formKey']"  check-type="single" title="表单配置" :columns="selectcolumns" url="/process/flowable" keys="formId"  lable="formName"   tableName="sysform" >
            </FmSelectTable>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item name="3">
          <template #title>
            <el-icon class="header-icon">
              <List />
            </el-icon>
            执行监听器
          </template>
          <el-form-item label="监听器" >
            <FmSelectTable v-model:value="formData['formKey']"  check-type="single" title="表单配置" :columns="selectcolumns" url="/process/flowable" keys="formId"  lable="formName"   tableName="sysform" >
            </FmSelectTable>
          </el-form-item>

        </el-collapse-item>


      </el-collapse>
<!--      <template #executionListener>-->
<!--        <el-badge :value="executionListenerLength">-->
<!--          <el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button>-->
<!--        </el-badge>-->
<!--      </template>-->
    </el-form>
    <executionListenerDialog
      v-if="dialogName === 'executionListenerDialog'"
      :element="element"
      :modeler="modeler"
      @close="finishExecutionListener"
    />
  </div>
</template>

<script>
import mixinPanel from '../../common/mixinPanel'
import mixinExecutionListener from '../../common/mixinExecutionListener'
import { commonParse } from '../../common/parseElement'
export default {
  mixins: [mixinPanel, mixinExecutionListener],
  data() {
    return {
      formData: {},
      activeNames:"1",
      selectcolumns:[
        {
          "label": "表单编号",//标签名称
          "index": "formId",//数据库索引
          "search": true,//是否是搜索表单
          "dataType": "text",//值值类型默认字符类型
          "addable":false
        },
        {
          "label": "表单名称",//标签名称
          "index": "formName",//数据库索引
          "search": true,//是否是搜索表单
          "dataType": "text",//值值类型默认字符类型
          "addable":false
        },
        {
          "label": "备注",//标签名称
          "index": "remark",//数据库索引
          "search": true,//是否是搜索表单
          "dataType": "text",//值值类型默认字符类型
          "addable":false
        },
      ],
      executionListenerLength: 0
    }
  },
  computed: {
    formConfig() {
      const _this = this
      return {
        inline: false,
        item: [
          {
            xType: 'input',
            name: 'id',
            label: '节点 id',
            rules: [{ required: true, message: 'Id 不能为空' }]
          },
          {
            xType: 'input',
            name: 'name',
            label: '节点名称'
          },
          {
            xType: 'input',
            name: 'documentation',
            label: '节点描述'
          },
          {
            xType: 'slot',
            name: 'executionListener',
            label: '执行监听器'
          },
          // {
          //   xType: 'input',
          //   name: 'initiator',
          //   label: '发起人',
          //   show: !!_this.showConfig.initiator
          // },
          // {
          //   xType: 'input',
          //   name: 'formKey',
          //   label: '表单标识key',
          //   show: !!_this.showConfig.formKey
          // }
        ]
      }
    }
  },
  watch: {
    'formData.initiator': function(val) {
      if (val === '') val = null
      // 默认设置流程发起人
      // if (val === '') val = 'INITIATOR'
      this.updateProperties({ 'flowable:initiator': val })
    },
    'formData.formKey': function(val) {
      if (val === '') val = null
      this.updateProperties({ 'flowable:formKey': val })
    }
  },
  created() {
    // this.updateProperties({ 'flowable:initiator': 'INITIATOR' })
    this.formData = commonParse(this.element)
    this.computedExecutionListenerLength();
  },
  methods:{
    computedExecutionListenerLength() {
      this.executionListenerLength = this.element.businessObject.extensionElements?.values
        ?.filter(item => item.$type === 'flowable:ExecutionListener').length ?? 0
    },
  }
}
</script>

<style>

</style>
